<template>
  <div style="background-color: gainsboro;">
    <van-radio-group v-model="radio" class="radio-group">
      <!-- 自定义卡片1 -->
      <div class="radio-card" :class="{ 'radio-card-checked': radio === '1' }" @click="selectRadio('1')" >
        <div class="card-content">
          <p class="card-title">省级</p>
        </div>
      </div>

      <!-- 自定义卡片2 -->
      <div
        class="radio-card"
        :class="{ 'radio-card-checked': radio === '2' }"
        @click="selectRadio('2')"
      >
        <div class="card-content">
          <p class="card-title">城市</p>
        </div>
      </div>
	  
	  <div
	    class="radio-card"
	    :class="{ 'radio-card-checked': radio === '3' }"
	    @click="selectRadio('3')"
	  >
	    <div class="card-content">
	      <p class="card-title">城市</p>
	    </div>
	  </div>
	  
	  <div
	    class="radio-card"
	    :class="{ 'radio-card-checked': radio === '4' }"
	    @click="selectRadio('4')"
	  >
	    <div class="card-content">
	      <p class="card-title">城市</p>
	    </div>
	  </div>
	  
    </van-radio-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: '1', // 默认选中第一个卡片
    };
  },
  methods: {
    selectRadio(value) {
      this.radio = value; // 通过点击卡片来更新选中的值
    }
  }
};
</script>

<style scoped>
	
	

.radio-group {
  display: flex;
}

.radio-card {
  display: block;
  position: relative;
  margin: 16px;
  border-radius: 6px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1.5px solid #fff;
}

.radio-card .card-content {
  display: flex;
  flex-direction: column;
}

.radio-card .card-title {
  font-size: 16px;
  font-weight: bold;
}

.radio-card .card-description {
  font-size: 12px;
  color: #666;
}

/* 选中时改变边框颜色 */
.radio-card.radio-card-checked {
  border-color: #409EFF; /* 选中后边框颜色变为蓝色 */
}


</style>
